<script setup>
import { ref, nextTick ,reactive,computed } from 'vue'
const count = ref(0)

// 计算属性的test
const author = reactive({  //注意reactive 要引入 
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery',
    'Vue 4 - The Mystery'
  ]
})

//设置一个计算属性
// 一个计算属性 ref,这样直接可以 bookNum返回
const bookNum = computed(() => {
  return author.books.length
}) 
//计算属性的方法，测试缓存的效果
function calculatBooknum(){
   return author.books.length
}
//
async function increment(){  //async异步执行
    count.value ++
    await nextTick()
   // 现在 DOM 已经更新了
    console.log('11111') //
}
</script>
<template>

<div>{{count}}</div>
<div>
   <button @click="increment">{{count}}</button>
</div>
<div>
    {{author.name}} 有 {{ author.books.length }} 本书
</div>
<div>
    {{ author.name }} 有 {{ bookNum }} 本书
</div>
<div>
    {{ author.name }} 有 {{ calculatBooknum() }} 本书
</div>
</template>

<style lang="scss" scoped>


</style>

